<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cat Cache管理</title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
	<div id="app">
		<el-row :gutter="20"> <el-col :span="8"> <el-card>
		<div slot="header">
			<span>Key</span>
		</div>
		<div>
			<el-input v-model="filterText" placeholder="输入key过滤" clearable></el-input>
			<!-- :filter-node-method="filterNode" -->
			<!-- :props="defaultProps" -->
			<el-tree ref="_tree" :data="keyData" @node-click="handleNodeClick"
				:filter-node-method="filterNode">
			</el-tree>
		</div>
		</el-card> </el-col> <el-col :span="6"> <el-card>
		<div slot="header">
			<span>Desc</span>
		</div>
		<div>
			<el-button-group> <el-button type="primary"
				size="small" icon="el-icon-help" @click="extendTime">延长时间</el-button>
			<el-button type="danger" size="small" icon="el-icon-delete"
				@click="removeByKey">删除</el-button>&nbsp;&nbsp; <el-button
				type="danger" size="small" icon="el-icon-delete-solid"
				@click="removeAll">删除所有</el-button> </el-button-group>
			<br><br>
			<el-form ref="form" size="small" :model="form" label-width="80px">
			<el-form-item label="Key"> <el-input
				v-model="form.key" readonly></el-input> </el-form-item> <el-form-item label="过期时间">
			<el-input v-model="form.expireTime" suffix-icon="el-icon-date"
				readonly></el-input> </el-form-item> </el-form>
		</div>
		</el-card> </el-col> <el-col :span="10"> <el-card>
		<div slot="header">
			<span>Value</span>
		</div>
		<div>
			<el-input :rows="40" type="textarea" v-model="values"></el-input>
		</div>
		</el-card> </el-col> </el-row>
	</div>
</body>
<script>
    new Vue({
        el: '#app',
        watch: {
            filterText(val) {
                this.$refs._tree.filter(val);
            }
        },
        mounted() {
        	this.refresh();
        },
        data: function () {
            return {
                filterText: "",
                keyData: [],
                defaultProps: {
                    children: '',
                    label: ''
                },
                form: {
                    key: null,
                    expireTime: null
                },
                values: null,
                curData: null // 当前节点
            }
        },
        methods: {
            handleNodeClick(data) {
            	this.curData = data;
                this.findByKey(data.key);
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.key.indexOf(value) !== -1;
            },
            extendTime() {
                this.$prompt('输入时长', '延长时间', {
                	inputPlaceholder:'时长（单位：秒）',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[0-9]*$/,
                    inputErrorMessage: '请输入数字'
                  }).then(({ value }) => {
                	  this.extand(value);
                  }).catch(() => {});
            },
            async getTreeKeys() {
                const res = await axios.get("/persitent/tree/keys")
                this.keyData = res.data
            },
            async findByKey(key) {
                const params = {key: key}
                const res = await axios.get("/persitent/key", {params: params})
                this.form.key = res.data.key;
                this.form.expireTime = res.data.expireTime;
                this.values = JSON.stringify(res.data.value);
            },
            async getAllValues() {
                const res = await axios.get("/persitent/values")
                this.values = JSON.stringify(res.data, null, "\t")
            },
            async removeByKey() {
            	this.$confirm('是否删除此条缓存信息', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                	  const params = {key: this.curData.key}
                      axios.delete("/persitent/remove",{params:params}).then(()=>{
                    	  this.$message({
                              type: 'success',
                              message: '删除成功!'
                            });
                    	  this.refresh();
                      })
                  }).catch(() => {});
            },
            removeAll() {
                this.$confirm('此操作会删除Redis中所有缓存信息！！', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                	  const params = {key: this.curData.key}
                	  axios.delete("/persitent/removeAll").then(()=>{
                    	  this.$message({
                              type: 'success',
                              message: '删除成功!'
                            });
                    	  this.refresh();
                      })
                  }).catch(() => {});
            },
            async extand(time){
            	const params={key:this.curData.key,time:time};
            	await axios.get("/persitent/extend",{params:params});
            	this.refresh();
            },
            refresh(){
        		this.getTreeKeys();
                this.getAllValues();
                this.form={};
        	},
        }
    })
</script>
</html>